<template>
	<view class="container">
		<!-- 标题 -->
		<headTitle :title="title" :bottomline="true"></headTitle>
		<view class="new font28 color666" v-if="title === '编辑地址'" @tap="delAddress">删除</view>
		<view class="interval"></view>
		<view class="box">
			<text class="box_left" space="emsp">姓  名</text>
			<view class="box_right">
				<input placeholder-class="pclass" type="text" v-model="user.name" placeholder="请填写收货人姓名" maxlength="8" @focus="show = false" @blur='show = true' />
				<view class="linkman">
					<image src="/static/image/linkman.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box_left">手机号码</view>
			<view class="box_right">
				<input placeholder-class="pclass" type="number" maxlength="11" v-model="user.phoneNumber" placeholder="请输入手机号码" @focus="show = false" @blur='show = true' />
			</view>
		</view>
		<view class="box">
			<view class="box_left">所在地区</view>
			<view class="box_right">
				<view class="citybtn" :class="{'p': pickerText === '请选择省市区'}" @tap="$refs.mpvueCityPicker.show()">{{ pickerText }}</view>
				<view class="jian-right">
					<text class="yticon icon-you"></text>
				</view>
			</view>
		</view>
		<view class="box box-address">
			<view class="box_left">详细地址</view>
			<view class="box_right">
				<textarea v-model="user.detailAddress" placeholder="街道、楼牌号等" auto-height maxlength="50" @focus="show = false" @blur='show = true' />
			</view>
		</view>
		<view class="box flex-column">
			<view class="default flex-center-between">
				<view class="box_left_two">设置默认地址</view>
				<view class="box_right_two">
					<switch color="#CB4738" :checked="user.defaultStatus == 1" style="transform:scale(0.8)" @change="switchBtn" />
				</view>
			</view>
			<view class="hiti color999">
				提醒：每次下单时会使用该地址，实际下单地址会根据您购物切换的地区进行智能判断，请在下单时确认哦！
			</view>
		</view>
		<button class="btn font34 colorfff" @tap="submit" v-show="show">保 存</button>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title.vue'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'

export default {
	data() {
		return {
			cityPickerValueDefault: [0, 0, 0],
			themeColor: '#B3392B',
			pickerText: '请选择省市区',
			user: {
				name: '', // [str] [必填] [收货人]
				phoneNumber: '',
				province: '', //[str] [必填] [省]
				city: '', //        [str] [必填] [市]
				region: '', //    [str] [必填] [区]
				detailAddress: '', //     [str] [必填] [详址]
				defaultStatus: '0', //     [int] [可选] [默认地址。1是0否]
			},
			id: '',
			title: '',
			height: 0, // 屏幕高度
			show: true, // 键盘弹起隐藏按钮
		};
	},
	components: {
		headTitle,
		mpvueCityPicker
	},
	onLoad(option) {
		this.title = '新建地址'
		if (option.type === 'edit') {
			this.title = '编辑地址'
			this.user = JSON.parse(option.data)
			this.id = this.user.id
			var province = this.user.province
			var city = this.user.city
			var region = this.user.region
			this.pickerText = province + city + region
		}
		// 获取窗口可视高度
		this.height = uni.getSystemInfoSync().windowHeight
		// 处理键盘弹出和收起
		uni.onWindowResize((res) => {
			if(this.height === res.size.windowHeight) {
				this.show = true
			}
		})
	},
	methods: {
		// 删除地址
		delAddress(){
			uni.showModal({
				content: '确定要删除该地址吗？',
				success: (res) => {
					if (res.confirm) {
						this.del()
					}
				}
			})
		},
		async del() {
			let data = await Api.apiCall('post', Api.goods.deleteAddress, {id: this.user.id});
			let txt = data ? '删除成功' : '删除失败'
			this.$api.msg(txt)
			setTimeout(function() {
				uni.navigateBack()
			}, 500)
		},
		// 选择完地区
		onConfirm(e) {
			var label = e.label
			this.pickerText = label
			var labelArr = label.split('-')
			this.user.province = labelArr[0]
			this.user.city = labelArr[1]
			this.user.region = labelArr[2]
			this.pickerText = ''
			labelArr.map(item => {
				this.pickerText += item
			})
		},
		// 提交
		async submit() {
			let params;
			var info = this.user,
				_this = this;
			if (info.name.trim()==''||info.phoneNumber==''||info.detailAddress.trim()=='') {
				this.$api.msg('请将信息填写完整')
				return
			}
			if (info.name.trim().length < 2) {
				this.$api.msg('姓名至少2个字')
				return
			}
			if (info.detailAddress.trim().length < 6) {
				this.$api.msg('详细地址至少5个字')
				return
			}
			var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
			if(!reg.test(info.phoneNumber)){
				this.$api.msg('请输入正确的手机号')
				return
			}
			uni.showLoading({
				title: '请稍等...'
			}) 
			params = {
				defaultStatus: info.defaultStatus,
				region: info.region,
				detailAddress: info.detailAddress.trim(),
				phoneNumber: info.phoneNumber,
				province: info.province,
				city: info.city,
				name: info.name.trim()
			}
			if (_this.id) {
				params.id = _this.id
			} 
			let data = await Api.apiCall('post', Api.goods.addressSave, params);
			if (data) {
				this.$api.msg(`地址${_this.id ? '修改' : '添加'}成功`);
				setTimeout(() => {
					uni.navigateBack({
						delta:1
					})
				}, 500)
			} else {
				this.$api.msg(`地址${_this.id ? '修改' : '添加'}失败`);
			}
		},
		// 设置默认
		switchBtn(e) {
			this.user.defaultStatus = e.target.value == true ? 1 : 0
		}
	}
};
</script>

<style lang="scss">
.container {
	width: 100%;
	font-size: 30rpx;
	color: #333;
}
.new {
	position: fixed;
	top: 0;
	right: 30rpx;
	height: 88rpx;
	line-height: 88rpx;
	z-index: 10;
}
.interval {
	width: 100%;
	height: 16rpx;
	background-color: #f5f5f5;
}
.pclass {
	font-size: 30rpx;
	color: #999;
}
.box {
	width: 100%;
	padding: 0 30rpx;
	min-height: 102rpx;
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #EEE;
	&.box-address {
		align-items: initial;
		min-height: 48rpx;
		padding: 27rpx 0 27rpx 30rpx;
	}
	.box_left {
		width: 180rpx;
	}
	.box_right {
		position: relative;
		width: 510rpx;
		input {
			padding: 0;
		}
		textarea {
			width: 100%;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			font-size: 30rpx;
			&/deep/.uni-textarea-placeholder {
				color: #999;
			}
		}
		.citybtn {
			width: 80%;
			height: 80upx;
			line-height: 80upx;
			overflow: hidden;
			&.p {
				color: #999;
			}
		}
		.linkman {
			position: absolute;
			top: 0;
			right: 0;
			width: 42rpx;
			height: 42rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.jian-right {
			position: absolute;
			top: 20rpx;
			right: 0;
		}
	}
	.default {
		width: 100%;
		height: 114rpx;
		line-height: 114rpx;
		.box_left_two {
			font-size: 32rpx;
			width: 200rpx;
		}
		.box_right_two {
			width: 94rpx;
		}
	}
	.hiti {
		line-height: 46rpx;
	}
}
.icon-you {
	font-size: $font-base;
	color: #999;
}
.btn {
	position: fixed;
	left: 50%;
	bottom: 30rpx;
	transform: translateX(-50%);
	width: 560rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #C84739;
	border-radius: 50rpx;
}
</style>
